/* ===================================================
   SYLA - Official Master Stylesheet (syla-theme.css)
   Brand: SYLA (Wear Your Story)
   Palette: #FBF9F8 (Off-White), #0D0D0D (Black), #B39676 (Brand Gold/Tan), #F0E6E1 (Studio)
   =================================================== */

/* 1. ألوان وهوية SYLA الأساسية والخلفيات */
:root {
  --syla-bg: #F0E6E1;
  --syla-offwhite: #FBF9F8;
  --syla-black: #0D0D0D;
  --syla-brand: #B39676;
  --syla-border: rgba(13, 13, 13, 0.08);
}

body, 
.main-content, 
.product-detail-page, 
.site-content {
  background-color: var(--syla-offwhite) !important;
  color: var(--syla-black) !important;
  -webkit-font-smoothing: antialiased;
}

/* 2. الهيدر وتأثير الـ Hover الأبيض */
header a:hover, 
.navbar a:hover, 
.nav-link:hover, 
.nav-item:hover > a {
  color: #FFFFFF !important;
}

header svg:hover, 
.navbar svg:hover, 
header a:hover svg, 
.navbar a:hover svg {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* 3. تلوين السعر في صفحة المنتج والصفحة الرئيسية وبادج الخصم */
.ab-price-sale,
.ab-pgrid-price.ab-price-sale,
.ab-featured-price.ab-price-sale,
.ab-plist-price.ab-price-sale,
.ab-pd-price-sale,
.ab-fixed-buy-price-sale,
.ab-pd-price.ab-pd-price-sale,
.ab-pd-price {
  color: var(--syla-brand) !important;
  font-weight: 800 !important;
}

.ab-pd-price-sale,
.ab-pd-price {
  font-size: 26px !important;
  letter-spacing: 0.5px !important;
}

.ab-pgrid-price.ab-price-sale,
.ab-featured-price.ab-price-sale {
  font-size: 18px !important;
}

.ab-fixed-buy-price-sale {
  font-size: 19px !important;
}

.ab-pd-sale-badge {
  background-color: var(--syla-brand) !important;
  color: #FFFFFF !important;
  border-radius: 2px !important;
}

/* 4. نصوص وتنسيقات وصف المنتج والتابات */
.ab-pd-description {
  white-space: pre-line !important;
  line-height: 1.8 !important;
}

.syla-size-guide-img {
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  display: block !important;
  margin: 25px auto !important;
  border-radius: 4px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.lq-desc-content, 
.tab-pane,
.product-tabs .tab-content {
  text-align: center !important;
  line-height: 2 !important;
  font-size: 14px !important;
}

.lq-desc-content strong, 
.tab-pane strong {
  display: inline-block !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  margin-top: 15px !important;
  margin-bottom: 5px !important;
  color: #0D0D0D !important;
}

/* أزرار التابات في سطر واحد دون انقسام أو فراغات */
.lq-desc-tab-wrap, 
.lq-desc-tab-wrap ul, 
.nav-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 15px !important;
  padding-bottom: 0 !important;
}

.lq-desc-tab-wrap ul::-webkit-scrollbar { 
  display: none !important; 
}

.lq-desc-tab, 
.product-tabs .nav-link, 
.tab-title {
  padding: 8px 14px !important;
  font-size: 13px !important;
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.lq-desc-tab.active, 
.product-tabs .nav-link.active, 
.tab-title.active {
  background-color: var(--syla-black) !important;
  color: #FFFFFF !important;
}

/* 5. إخفاء عبارة Powered by easyorders وتوسيط الفوتر */
.ab-footer-powered, 
p.ab-footer-powered, 
[class*="footer-powered"] {
  display: none !important;
}

.ab-footer-bottom, 
.ab-footer-bottom .container, 
.ab-footer-bottom .row, 
.ab-footer-bottom [class*="col"], 
.ab-footer-copy {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

.ab-footer-bottom {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.ab-footer-copy {
  font-size: 13px !important;
  color: #777777 !important;
  direction: rtl !important;
}

/* 6. أيقونة الواتساب العائمة */
.syla-whatsapp-float {
  position: fixed !important;
  bottom: 25px !important;
  right: 25px !important;
  width: 56px !important;
  height: 56px !important;
  background-color: #25D366;
  color: #FFFFFF !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  z-index: 999999;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.syla-whatsapp-float:hover {
  background-color: #20ba59;
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.45);
}

.syla-whatsapp-float svg {
  width: 32px;
  height: 32px;
  fill: #FFFFFF !important;
}

@media (max-width: 768px) {
  .syla-whatsapp-float {
    bottom: 85px !important;
    right: 18px !important;
    width: 50px;
    height: 50px;
  }
  .syla-whatsapp-float svg { 
    width: 28px; 
    height: 28px; 
  }
}

/* 7. شاشة التحميل (Preloader) */
#syla-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #B39676 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999999;
  transition: transform 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

#syla-preloader.syla-exit {
  transform: translateY(-100%);
  pointer-events: none;
}

.syla-loader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

#syla-preloader.syla-exit .syla-loader-content {
  transform: translateY(-30px);
  opacity: 0;
}

.syla-loader-logo {
  max-width: 200px;
  width: auto;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  filter: none !important;
  animation: sylaReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.syla-progress-track {
  width: 130px;
  height: 2px;
  background: rgba(13, 13, 13, 0.2);
  margin-top: 25px;
  overflow: hidden;
  border-radius: 2px;
  direction: ltr !important;
  position: relative;
  opacity: 0;
  animation: sylaFadeIn 0.5s ease 0.2s forwards;
}

.syla-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #0D0D0D;
  animation: sylaFillLtr 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes sylaReveal { 
  0% { opacity: 0; transform: translateY(12px) scale(0.96); } 
  100% { opacity: 1; transform: translateY(0) scale(1); } 
}
@keyframes sylaFadeIn { to { opacity: 1; } }
@keyframes sylaFillLtr { 0% { width: 0%; } 100% { width: 100%; } }

/* 8. قسم ليه تختار SYLA؟ */
#syla-features-section {
  max-width: 1100px !important;
  margin: 60px auto 30px auto !important;
  padding: 0 20px !important;
  text-align: center !important;
  font-family: inherit !important;
  color: #0D0D0D !important;
  display: block !important;
  clear: both !important;
}

.syla-features-header { margin-bottom: 40px !important; }
.syla-features-title { font-size: 26px !important; font-weight: 800 !important; color: #0D0D0D !important; }
.syla-features-subtitle { font-size: 11px !important; letter-spacing: 3px !important; color: #B39676 !important; font-weight: 600; text-transform: uppercase; }
.syla-features-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 35px !important; }
.syla-feature-card { display: flex !important; flex-direction: column !important; align-items: center !important; }
.syla-feature-icon-wrap { width: 76px !important; height: 76px !important; background-color: #F0E6E1 !important; border: 1px solid rgba(179, 150, 118, 0.25) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 18px !important; }
.syla-feature-icon-wrap svg { width: 36px !important; height: 36px !important; fill: #B39676 !important; }
.syla-feature-card-title { font-size: 17px !important; font-weight: 800 !important; margin-bottom: 10px !important; color: #0D0D0D !important; }
.syla-feature-card-text { font-size: 13.5px !important; line-height: 1.85 !important; color: #555555 !important; max-width: 320px !important; }

/* 9. قسم الأسئلة الشائعة */
#syla-faq-section {
  max-width: 850px !important;
  margin: 40px auto 50px auto !important;
  padding: 0 20px !important;
  display: block !important;
  clear: both !important;
  color: #0D0D0D !important;
}

#syla-faq-section .syla-faq-header { text-align: center !important; margin-bottom: 30px !important; }
#syla-faq-section .syla-faq-title { font-size: 24px !important; font-weight: 800 !important; color: #0D0D0D !important; }
#syla-faq-section .syla-faq-subtitle { font-size: 11px !important; letter-spacing: 3px !important; color: #B39676 !important; font-weight: 600; text-transform: uppercase; }
#syla-faq-section .syla-faq-item { border: 1px solid rgba(13, 13, 13, 0.12) !important; border-radius: 4px !important; margin-bottom: 12px !important; background-color: #FFFFFF !important; overflow: hidden !important; }
#syla-faq-section .syla-faq-item.active { border-color: #B39676 !important; }
#syla-faq-section .syla-faq-question { width: 100% !important; background: transparent !important; border: none !important; padding: 16px 20px !important; text-align: right !important; font-size: 15px !important; font-weight: 700 !important; color: #0D0D0D !important; display: flex !important; justify-content: space-between !important; align-items: center !important; cursor: pointer !important; }
#syla-faq-section .syla-faq-icon { font-size: 22px !important; color: #B39676 !important; transition: transform 0.25s ease !important; margin-right: 12px !important; }
#syla-faq-section .syla-faq-item.active .syla-faq-icon { transform: rotate(45deg) !important; }
#syla-faq-section .syla-faq-item .syla-faq-answer { display: none !important; font-size: 14px !important; line-height: 1.9 !important; color: #4A4A4A !important; padding: 14px 20px 18px 20px !important; border-top: 1px solid rgba(13, 13, 13, 0.05) !important; background-color: #FAFAFA !important; }
#syla-faq-section .syla-faq-item.active .syla-faq-answer { display: block !important; }

/* 10. إخفاء التقييمات وميزة Read more */
[class*="review"] img:not([src*="star"]) {
  cursor: pointer !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

[class*="review"] img:not([src*="star"]):hover {
  opacity: 0.9 !important;
  transform: scale(1.03) !important;
}

[class*="review"] p,
[class*="review"] [class*="content"],
[class*="review"] [class*="text"],
[class*="review"] [class*="body"],
.review-comment,
.review-description {
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
  display: block !important;
}

.read-more,
[class*="read-more"],
[class*="readmore"],
[class*="read_more"],
[class*="review"] a[class*="more"],
[class*="review"] button[class*="more"] {
  display: none !important;
  visibility: hidden !important;
}

/* 11. النوافذ المنبثقة (المقاسات وتكبير الصور) */
.syla-size-guide-trigger-wrap { margin: 12px 0 16px 0 !important; display: block !important; clear: both !important; }
.syla-size-modal-btn {
  background-color: #F0E6E1 !important;
  border: 1px solid rgba(179, 150, 118, 0.4) !important;
  color: #0D0D0D !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}
.syla-size-modal-btn:hover {
  background-color: #0D0D0D !important;
  color: #FFFFFF !important;
  border-color: #0D0D0D !important;
  transform: translateY(-1px) !important;
}

#syla-size-popup,
#syla-review-lightbox {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(5px) !important;
  z-index: 999999999 !important;
  display: none;
  justify-content: center !important;
  align-items: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#syla-size-popup.syla-popup-open,
#syla-review-lightbox.syla-lightbox-active {
  display: flex !important;
}

.syla-popup-box,
.syla-lightbox-content {
  background-color: #FBF9F8 !important;
  border-radius: 8px !important;
  max-width: 750px !important;
  width: 100% !important;
  position: relative !important;
  padding: 24px 16px 16px 16px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4) !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.syla-popup-close-btn,
.syla-lightbox-close {
  position: absolute !important;
  top: 8px !important;
  left: 12px !important;
  background: transparent !important;
  border: none !important;
  font-size: 26px !important;
  color: #0D0D0D !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.syla-popup-img,
.syla-lightbox-content img {
  width: 100% !important;
  height: auto !important;
  max-height: 78vh !important;
  object-fit: contain !important;
  display: block !important;
  margin: 10px auto 0 auto !important;
  border-radius: 4px !important;
}

/* 12. إخفاء الأقسام في الـ Checkout وتجاوب الموبايل */
body[class*="checkout"] #syla-features-section,
body[class*="checkout"] #syla-faq-section,
.checkout-page #syla-features-section,
.checkout-page #syla-faq-section,
[class*="checkout"] #syla-features-section,
[class*="checkout"] #syla-faq-section {
  display: none !important;
}

@media (max-width: 768px) {
  .syla-features-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* ===================================================
   13. إشعار الشراء الذكي المنبثق (Sales Toast Popup)
   =================================================== */
#syla-sales-popup {
  position: fixed !important;
  bottom: 25px !important;
  left: 25px !important;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(13, 13, 13, 0.1) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 99999 !important;
  max-width: 310px !important;
  font-family: inherit !important;
  direction: rtl !important;
  text-align: right !important;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#syla-sales-popup.syla-popup-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.syla-sales-img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  background-color: #F0E6E1 !important;
  flex-shrink: 0 !important;
}

.syla-sales-info {
  flex-grow: 1 !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
}

.syla-sales-buyer {
  font-size: 12px !important;
  color: #0D0D0D !important;
  margin: 0 !important;
}

.syla-sales-buyer strong {
  font-weight: 700 !important;
}

.syla-sales-item-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #B39676 !important;
  margin: 2px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.syla-sales-meta {
  font-size: 10.5px !important;
  color: #888888 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.syla-sales-check {
  color: #27AE60 !important;
  font-weight: 600 !important;
}

.syla-sales-close-btn {
  background: transparent !important;
  border: none !important;
  color: #AAAAAA !important;
  font-size: 16px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 0 0 4px !important;
  align-self: flex-start !important;
  transition: color 0.2s ease !important;
}

.syla-sales-close-btn:hover {
  color: #0D0D0D !important;
}

@media (max-width: 768px) {
  #syla-sales-popup {
    bottom: 85px !important;
    left: 14px !important;
    max-width: 275px !important;
    padding: 8px 12px !important;
  }
  .syla-sales-img {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ===================================================
   14. تعريب زر LOAD MORE إلى تحميل المزيد
   =================================================== */
.ab-pgrid-more,
button.load-more,
[class*="load-more"],
[class*="loadmore"] {
  font-size: 0 !important;
}

.ab-pgrid-more::after,
button.load-more::after,
[class*="load-more"]::after,
[class*="loadmore"]::after {
  content: "تحميل المزيد" !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  display: inline-block !important;
}

/* ===================================================
   15. قسم تفاصيل ووصف المنتج المستقل بتنسيق متوسّط واحترافي للموبايل
   =================================================== */
#syla-product-details-section {
  width: 100% !important;
  max-width: 950px !important;
  margin: 35px auto 30px auto !important;
  padding: 0 16px !important;
  display: block !important;
  clear: both !important;
  direction: rtl !important;
  color: #0D0D0D !important;
  box-sizing: border-box !important;
  flex: 0 0 100% !important;
  align-self: stretch !important;
}

#syla-product-details-section,
#syla-product-details-section * {
  box-sizing: border-box !important;
}

#syla-product-details-section .syla-desc-tab-item {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(13, 13, 13, 0.12) !important;
  border-radius: 8px !important;
  margin-bottom: 14px !important;
  background-color: #FFFFFF !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

#syla-product-details-section .syla-desc-tab-item.active {
  border-color: #B39676 !important;
  box-shadow: 0 2px 8px rgba(179, 150, 118, 0.08) !important;
}

#syla-product-details-section .syla-desc-tab-btn {
  width: 100% !important;
  min-height: 56px !important;
  background: transparent !important;
  border: none !important;
  padding: 16px 24px !important;
  text-align: right !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0D0D0D !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  direction: rtl !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease !important;
}

#syla-product-details-section .syla-desc-tab-btn:hover {
  background-color: #FAFAFA !important;
}

#syla-product-details-section .syla-desc-tab-item.active .syla-acc-title {
  color: #B39676 !important;
}

#syla-product-details-section .syla-desc-tab-icon {
  font-size: 22px !important;
  color: #B39676 !important;
  transition: transform 0.25s ease !important;
  margin-right: 14px !important;
  line-height: 1 !important;
  display: inline-block !important;
  font-family: monospace, sans-serif !important;
  flex-shrink: 0 !important;
}

#syla-product-details-section .syla-desc-tab-item.active .syla-desc-tab-icon {
  transform: rotate(45deg) !important;
}

#syla-product-details-section .syla-desc-tab-body {
  display: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 14.5px !important;
  line-height: 2 !important;
  color: #2b2b2b !important;
  padding: 24px 24px 30px 24px !important;
  border-top: 1px solid rgba(13, 13, 13, 0.05) !important;
  background-color: #FFFFFF !important;
  text-align: center !important;
}

#syla-product-details-section .syla-desc-tab-item.active .syla-desc-tab-body {
  display: block !important;
}

#syla-product-details-section .syla-desc-tab-body,
#syla-product-details-section .syla-desc-tab-body * {
  text-align: center !important;
}

/* شارات وأيقونات هوية SYLA باللون الذهبي (#B39676) */
.syla-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background-color: rgba(179, 150, 118, 0.12) !important;
  color: #B39676 !important;
  margin-left: 10px !important;
  margin-right: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.syla-icon-badge svg {
  display: block !important;
  stroke: #B39676 !important;
}

.syla-acc-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0D0D0D !important;
  letter-spacing: 0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.2s ease !important;
}

.syla-pane-text {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  line-height: 2 !important;
  font-size: 14.5px !important;
  color: #2b2b2b !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.syla-pane-text p,
.syla-desc-p {
  margin: 0 auto 12px auto !important;
  max-width: 700px !important;
  text-align: center !important;
  line-height: 1.95 !important;
}

.syla-pane-text strong,
.syla-desc-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-top: 22px !important;
  margin-bottom: 10px !important;
  color: #0D0D0D !important;
}

.syla-desc-bullets {
  margin: 12px auto 18px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
}

.syla-bullet-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 4px auto !important;
  line-height: 1.8 !important;
  font-size: 14px !important;
  color: #2b2b2b !important;
}

.syla-bullet-row .syla-icon-badge {
  width: 22px !important;
  height: 22px !important;
  margin-left: 8px !important;
  background-color: rgba(179, 150, 118, 0.1) !important;
}

.syla-size-guide-img {
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  display: block !important;
  margin: 24px auto 10px auto !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
}

/* إخفاء التابات القديمة المكررة التابعة للقالب بالكامل */
.lq-desc-wrap,
#lq-desc-wrap {
  display: none !important;
}

/* تخصيصات الموبايل المتجاوبة لتوسيط النص وضبط الأكورديون بدقة شاشات الهواتف */
@media (max-width: 768px) {
  #syla-product-details-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto 25px auto !important;
    padding: 0 12px !important;
  }

  #syla-product-details-section .syla-desc-tab-btn {
    min-height: 52px !important;
    padding: 14px 16px !important;
  }

  .syla-acc-title {
    font-size: 15px !important;
  }

  .syla-icon-badge {
    width: 26px !important;
    height: 26px !important;
    margin-left: 8px !important;
  }

  #syla-product-details-section .syla-desc-tab-body {
    padding: 18px 14px 22px 14px !important;
  }

  .syla-pane-text {
    font-size: 13.5px !important;
    line-height: 1.85 !important;
  }

  .syla-bullet-row {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
}

/* ===================================================
   إخفاء عناصر الثيم الافتراضية المكررة (عداد الخصم، المخزون، وعدد الزوار)
   والإبقاء فقط على صندوق SYLA المخصص العلوي (#syla-urgency-box)
   =================================================== */
.ab-fake-counter,
.ab-fake-stock,
.ab-fake-visitor,
[class*="ab-fake-counter"],
[class*="ab-fake-stock"],
[class*="ab-fake-visitor"],
.ab-fc-top,
.ab-fc-boxes,
.ab-fs-status,
.ab-fv-text {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* ===================================================
   16. صندوق الإلحاح والندرة الذكي (Urgency & Scarcity Box)
   =================================================== */
#syla-urgency-box {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(179, 150, 118, 0.35) !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin: 16px 0 !important;
  direction: rtl !important;
  text-align: right !important;
  font-family: inherit !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  display: block !important;
  clear: both !important;
}

.syla-urgency-row {
  margin-bottom: 12px !important;
}

.syla-urgency-row:last-child {
  margin-bottom: 0 !important;
}

/* أ. عداد الزوار النبضي */
.syla-visitors-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13.5px !important;
  color: #222222 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(13, 13, 13, 0.06) !important;
}

.syla-pulse-dot {
  width: 10px !important;
  height: 10px !important;
  background-color: #27AE60 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7) !important;
  animation: sylaPulse 1.8s infinite !important;
}

@keyframes sylaPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(39, 174, 96, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

.syla-visitors-row strong {
  color: #B39676 !important;
  font-weight: 800 !important;
}

/* ب. شريط المخزون المتبقي */
.syla-stock-row {
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(13, 13, 13, 0.06) !important;
}

.syla-stock-label {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #D9383A !important;
  margin-bottom: 7px !important;
}

.syla-stock-alert {
  font-size: 11px !important;
  background-color: #FDF2F2 !important;
  color: #D9383A !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(217, 56, 58, 0.2) !important;
}

.syla-stock-track {
  width: 100% !important;
  height: 6px !important;
  background-color: #F0E6E1 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.syla-stock-bar {
  height: 100% !important;
  background: linear-gradient(90deg, #B39676, #D9383A) !important;
  border-radius: 999px !important;
  transition: width 0.6s ease !important;
}

/* ج. العداد التنازلي للخصم */
.syla-timer-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-top: 2px !important;
}

.syla-timer-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0D0D0D !important;
}

.syla-timer-clock {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  direction: ltr !important;
}

.syla-time-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background-color: #0D0D0D !important;
  color: #FFFFFF !important;
  padding: 4px 7px !important;
  border-radius: 4px !important;
  min-width: 32px !important;
  text-align: center !important;
}

.syla-time-block span {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  font-family: monospace, sans-serif !important;
}

.syla-time-block label {
  font-size: 9px !important;
  color: #B39676 !important;
  margin-top: 2px !important;
  font-weight: 500 !important;
}

.syla-colon {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #B39676 !important;
}

/* ===================================================
   17. إعادة ترتيب عناصر صفحة المنتج لضمان ظهور السعر والمقاسات والألوان قبل الوصف
   =================================================== */
.ab-pd-summary,
.product-single__meta,
.product__info-container,
.ab-product-details,
form.ab-pd-form,
.ab-pd-info,
.product-info-wrap {
  display: flex !important;
  flex-direction: column !important;
}

/* 1. عنوان المنتج */
h1.ab-pd-title,
.ab-pd-title,
.product-title,
.product__title,
h1 {
  order: 1 !important;
}

/* 2. السعر ونسبة الخصم */
.ab-pd-price,
.ab-pd-price-sale,
.product-price,
.price-container,
.product__price,
.ab-pd-price-wrap {
  order: 2 !important;
}

/* 3. عداد التنازلي الترويجي */
#syla-urgency-box {
  order: 3 !important;
}

/* 4. الألوان والمقاسات وخيارات المنتج وزر دليل المقاسات */
.ab-pd-options,
.ab-pd-variants,
.product-form__variants,
.variant-picker,
.syla-size-guide-trigger-wrap,
[class*="variant"],
[class*="option"] {
  order: 4 !important;
}

/* 5. زر الشراء والإضافة للسلة */
.ab-pd-actions,
.ab-pd-buy-btn,
.product-form__buttons,
.ab-pd-submit,
button[type="submit"].ab-buy-now,
.btn-buy-now {
  order: 5 !important;
}

/* 6. الوصف القديم أو التابات في الأسفل دائماً */
.ab-pd-description,
.lq-desc-wrap,
#lq-desc-wrap,
.product-description,
.product-tabs {
  order: 10 !important;
}

/* ضمان وضع تفاصيل المنتج المستقل في نهاية عمود المنتج دائماً */
.product-single__details {
  display: flex !important;
  flex-direction: column !important;
}

.product-single__details > #syla-product-details-section,
.product-single__details > .product-description,
.product-single__details > [class*="desc"] {
  order: 999 !important;
}